<template>
    <div>
        <!-- 进出站管理-旅客进站 -->
        <div class="car-container">
            <el-row>
                <el-col :span="24">
                    <!--车辆基本信息S-->
                    <div class="left-choose lf">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf"><div class="lf title">车辆基本信息</div>
                    </div>

                    <!--车辆基本信息E-->
                </el-col>
            </el-row>

            <div class="car-items" style="height: 200px;">
                <el-form ref="form" :model="form" style="margin-left: 10px">
                    <el-form-item label="车票号条码" label-width="90px" class="lf">
                        <el-input v-model="cardCode" style='width: 135px;'></el-input>
                        <el-button @click="searchCode" icon="el-icon-search" size="mini"></el-button>
                    </el-form-item>
                    <el-form-item label="班次日期" label-width="80px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="classDay" style='width: 150px;'></el-input>
                    </el-form-item>
                    <el-form-item label="班次号" label-width="60px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="classNumber" style='width: 130px;'></el-input>
                    </el-form-item>
                    <el-form-item label="时间" label-width="60px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="cardTimes" style='width: 130px;'></el-input>
                    </el-form-item>
                    <el-form-item label="报班车牌" label-width="80px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="registration" style='width: 150px;'></el-input>
                    </el-form-item>

                    <el-form-item label="购票时间" label-width="90px" class="lf">
                        <el-input v-model="buyTimes" style='width: 180px;'></el-input>
                    </el-form-item>
                    <el-form-item label="检票口" label-width="80px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="ticketCheck" style='width: 150px;'></el-input>
                    </el-form-item>
                    <el-form-item label="座号" label-width="60px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="seatNumber" style='width: 130px;'></el-input>
                    </el-form-item>
                    <el-form-item label="携童" label-width="60px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="carryChild" style='width: 130px;'></el-input>
                    </el-form-item>
                    <el-form-item label="携童姓名" label-width="80px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="carryName" style='width: 150px;'></el-input>
                    </el-form-item>

                    <el-form-item label="证件号码" label-width="90px" class="lf">
                        <el-input v-model="certificateNumbe" style='width: 180px;'></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" label-width="80px" class="lf" style="margin-left: 20px;">
                        <el-select v-model="sexModel" style='width: 150px;' placeholder="">
                            <el-option label="" :value="list.key" v-for="list in credentialType">{{list.value}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名" label-width="60px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="userName" style='width: 130px;'></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <el-tabs v-model="activeName" style="height: 140px;margin-left: 10px">
                <el-tab-pane label="身份证" name="first">
                    <el-form ref="form">
                        <el-form-item label="公民身份证号码" label-width="115px" class="lf">
                            <el-input v-model="peopleNum" style='width: 260px;' size="mini"></el-input>
                            <el-button @click="searchIDCard" icon="el-icon-search" size="mini"></el-button>
                        </el-form-item>
                        <el-form-item label="姓名" label-width="70px" class="lf">
                            <el-input v-model="peopleName" style='width: 160px;' size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" class="lf" label-width="70px">
                            <el-select v-model="sexModel" style='width: 130px;' size="mini" placeholder="">
                                <el-option label="" v-for='sex in sexArr' :value="sex.key">{{sex.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="民族" class="lf" label-width="80px">
                            <el-select v-model="nation" style='width: 110px;' placeholder="" size="mini">
                                <el-option label="" v-for='item in items' :value="item.key">{{item.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出生" label-width="80px" class="lf">
                            <el-input v-model="born" style='width: 120px;' size="mini"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>


                <el-tab-pane label="其他证件" name="second">
                    <el-form>
                        <el-form-item label="证件类型" class="lf" label-width="70px">
                            <el-select v-model="credentials" style='width: 130px;' size="mini" placeholder="">
                                <el-option label="" v-for='sex in credent' :value="sex.key">{{sex.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号" label-width="70px" class="lf">
                            <el-input v-model="credentNum" style='width: 160px;' size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" class="lf" label-width="70px">
                            <el-select v-model="sexModel1" style='width: 130px;' size="mini" placeholder="">
                                <el-option label="" v-for='sex in sexArr1' :value="sex.key">{{sex.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名" label-width="80px" class="lf">
                            <el-input v-model="youName" style='width: 120px;' size="mini"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <div class="car-items" style="height: 100px">
                    <!--<avue-form ref="form" v-model="outLoginMess" :option="outLogin" class="yz-form" style="height: 100px"></avue-form>-->
                    <button class="transport preserve rf"><i class="lf"></i><span class="lf">确认审核</span></button>
                    <button class="transport read rf"><i class="lf"></i><span class="lf">读取身份证信息</span></button>
                </div>
            </el-tabs>

        </div>

        <!--对应的查询数据-->
        <div class="bottom-container lf">
            <!-- 数据表格 -->
            <el-row>
                <el-col :span="24">
                    <avue-crud :data="carData"  :page="page" :option="dataForm"></avue-crud>
                </el-col>
            </el-row>
        </div>

        <div class="photoCollect">
            <div class="photoImg">图像采集</div>
             <img style="cursor: pointer;" src="../../assets/imgs/content_icon_tuxiangcaiji_default.png" alt="">
            <button class="startAdobe">点击即可启用 Adobe Flsah Play</button>
            <button class="takePhoto"><i class="lf"></i><span class="lf">拍照</span></button>
        </div>
    </div>
</template>

<script>


    import "../../assets/js/jquery.js";
    // import TableData from "../../components/common/tableData";
    // import qs from "qs";
    const DIC = { VAILD: [] };
    export default {
        data: function(){
            return {//
                input: '',
                cardCode: '',
                classDay: '',
                classNumber: '',
                cardTimes: '',
                registration: '',
                buyTimes: '',
                ticketCheck: '',
                seatNumber: '',
                carryChild: '',
                carryName: '',
                certificateNumbe: '',
                userName: '',
                peopleNum: '',
                peopleName: '',
                credentNum: '',
                youName: '',
                born: '',
                sexModel :'',
                sexModel1 :'',
                credentials :'',
                nation :'',
                credentialType :[],
                items :[],
                sexArr :[],
                sexArr1 :[],
                credent :[],
                activeName: 'first',
                aaa:{
                    dicData:DIC,
                    column: [
                        {
                            label: "车票号条码",
                            prop: "cardNumber",
                            span: 5
                        },
                        {
                            label: "班次日期",
                            prop: "classDate",
                            span: 5
                        },
                        {
                            label: "班次号",
                            prop: "classNumbers",
                            span: 4
                        },
                        {
                            label: "时间",
                            prop: "times",
                            span: 4
                        },
                        {
                            label: "报班车牌",
                            prop: "registrationPlate",
                            span: 4
                        },
                        {
                            label: "购票时间",
                            prop: "buyTime",
                            span: 5
                        },
                        {
                            label: "检票口",
                            prop: "ticketEntrance",
                            span: 5
                        },
                        {
                            label: "座号",
                            prop: "seatNumbe",
                            span: 4
                        },
                        {
                            label: "携童",
                            prop: "carryChildren",
                            span: 5
                        },
                        {
                            label: "携童姓名",
                            prop: "childName",
                            span: 5
                        },
                        {
                            label: "证件号码",
                            prop: "ertificateNumbe",
                            span: 5
                        },
                        {
                            label: "证件类型",
                            prop: "credentialsType",
                            type: "select",
                            dicData: 'VAILD',
                            span: 5
                        },
                        {
                            label: "姓名",
                            prop: "userName",
                            span: 5
                        },
                    ]
                },
                form:{
                    datetime:'1398250549123'//时间戳例子
                },
                carData:[
                    {
                        ticketNum:'202020',//车票号
                        dates:'2018',//日期
                        times:'13.14',//时间
                        endTo:'烈士陵园',//到站
                        status:'200ok',//状态
                        ticketType:'儿童',//票型
                    },
                ],
                page: {
                    pageSizes: [10],//分页信息
                    total: 20,//总页数
                    currentPage: 1,//当前第几页
                    pageSize: 10,//每一页加载多少条数据
                },
                dataForm:{
                    page:true,
                    align:'center',
                    addBtn:false,//是否添加按钮
                    delBtn:false,//是否添加删除按钮
                    editBtn:false,//是否添加编辑按钮
                    menu:false,//是否添加菜单按钮
                    column:[
                        {
                            label:'车票号',
                            prop:'ticketNum',
                        },
                        {
                            label:'日期',
                            prop:'dates',
                        },
                        {
                            label:'时间',
                            prop:'times',
                        },
                        {
                            label:'到站',
                            prop:'endTo',
                        },
                        {
                            label:'状态',
                            prop:'status',
                        },
                        {
                            label:'票型',
                            prop:'ticketType',
                        }
                    ]
                },
            };
        },
        methods:{
            //获取证件列表
            getList(){
                this.postRequest('/common/constant/getCredentialType').then(target => {
                    for(var i=0;i<target.data.length;i++){
                        this.credentialType.push(target.data[i]);
                    }
                });
                return  this.credentialType;
            },
            getNation(){
                //获取民族列表
                this.postRequest('/common/constant/getNation').then(target => {
                    for(var i=0;i<target.data.length;i++){
                        this.items.push(target.data[i])
                    }
                });
                return this.items;
            },
            getSexModel(){
                //获取性别列表
                this.postRequest('/common/constant/getSexCN').then(target => {
                    for(var i=0;i<target.data.length;i++){
                        this.sexArr.push(target.data[i]);
                    }
                });
                return this.sexArr;
            },
            getSexModel1(){
                //获取性别列表
                this.postRequest('/common/constant/getSexCN').then(target => {
                    for(var i=0;i<target.data.length;i++){
                        this.sexArr1.push(target.data[i]);
                    }
                });
                return this.sexArr1;
            },
            getCredentialType(){
                //获取证件列表
                this.postRequest('/common/constant/getCredentialType').then(target => {
                    for(var i=0;i<target.data.length;i++){
                        this.credent.push(target.data[i])
                    }
                });
                return this.credent;
            },
            searchIDCard(){
                alert("后台没对应的接口");
            },
            searchCode(){
                alert("后台没对应的接口");
            },
        },
        computed:{},
        watch:{},
        beforeCreate () {
            console.log('根组件：beforeCreate')
        },
        mounted() {
            this.$emit("sendActive","1-1");
            //加载证件类型
            this.getList();
            //加载民族
            this.getNation();
            //加载性别
            this.getSexModel();
            this.getSexModel1();
            //加载证件列表
            this.getCredentialType();
        }
    }




</script>
<style scoped src="../../assets/css/inoutManage/ticketTest.css"></style>
